.vip1 {
    color: #8c8ef6;
}

.vip2 {
    background: linear-gradient(to left, blue 0%, red 75%);
    -webkit-background-clip: text;
    color: transparent;
}

.vip3 {
    color: #FFF;
    -webkit-animation: vip4-animate 2s infinite; /* Chrome, Safari, Opera */
    animation: vip4-animate 2s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes vip3-animate {
    25% {
        color: orange;
    }
    50% {
        color: yellow;
    }
    75% {
        color: green;
    }
}

/* Standard syntax */
@keyframes vip3-animate {
    25% {
        color: orange;
    }
    50% {
        color: yellow;
    }
    75% {
        color: green;
    }
}

.vip4 {
    color: #FFF;
    -webkit-animation: vip4-animate 2s infinite; /* Chrome, Safari, Opera */
    animation: vip4-animate 2s infinite;
}

.vip4-shadow {
    color: #FFF;
    font-family: Microsoft YaHei;
    text-shadow: .1rem 0 .2rem #fc6423,
    -.1rem 0 .2rem #fc6423,
    0 .1rem .2rem #fc6423,
    0 -.1rem .2rem #fc6423;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes vip4-animate {
    15% {
        color: red;
    }
    30% {
        color: orange;
    }
    45% {
        color: yellow;
    }
    60% {
        color: green;
    }
    75% {
        color: cyan;
    }
    90% {
        color: blue;
    }
    100% {
        color: purple;
    }
}

/* Standard syntax */
@keyframes vip4-animate {
    15% {
        color: red;
    }
    30% {
        color: orange;
    }
    45% {
        color: yellow;
    }
    60% {
        color: green;
    }
    75% {
        color: cyan;
    }
    90% {
        color: blue;
    }
    100% {
        color: purple;
    }
}

.per_avatar_area.vip4 {
    /* 安排下面的动画 尤其是 infinite 才会一直动 */
    animation: breathing-light infinite;
    animation-duration: 1.5s;
    /* Safari and Chrome */
    -webkit-animation: breathing-light infinite;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes breathing-light {
    0% {
        box-shadow: 0 0 10px 0 red;
    }
    20% {
        box-shadow: 0 0 10px 1px orange;
    }
    40% {
        box-shadow: 0 0 10px 3px yellow;
    }
    60% {
        box-shadow: 0 0 10px 5px green;
    }
    80% {
        box-shadow: 0 0 10px 3px cyan;
    }
    100% {
        box-shadow: 0 0 10px 1px blue;
    }
}

.vip1color {
    color: #8c8ef6;
}

.vip2color {
    color: #109dff;
}

.vip3color {
    color: gold;
}

.vip4color {
    color: #fc6423;
}